<template>
    <div>
        <el-dialog 
        v-model="dialogVisible" 
        width="50%"
        title="个人信息"
        :destroy-on-close="true"
        >   
            <div style="width: 90%;margin: auto;" v-if="loading">
                <p>数据加载中......</p>
            </div>
            <div style="width: 90%;margin: auto;" v-else>
                <p>基本信息</p>
                <el-button type="primary" v-if="updateUserInfoFlag==false" style="float: right;"  @click="updateUserInfo">修 改</el-button>
                <el-button type="primary" v-if="updateUserInfoFlag==true" style="float: right;" @click="saveUserInfo">保 存</el-button>
                <el-button v-if="updateUserInfoFlag==true" style="position: absolute;right: 5%;margin-top: 6.5%;" @click="updateUserInfoFlag=false" >取 消</el-button>
                <el-row v-if="updateUserInfoFlag==false" style="padding-left: 2%;">
                    <el-col :span="12" class="userInfoItem">
                        <span>手机号：</span>{{ userInfo.phone }}
                    </el-col>
                    <el-col :span="12" class="userInfoItem">
                        <span>用户名称：</span>{{ userInfo.name }}
                    </el-col>
                    <el-col :span="12" class="userInfoItem">
                        <span>微信号：</span>{{ userInfo.wechatID }}
                    </el-col>
                    <el-col :span="12" class="userInfoItem">
                        <span>微信昵称：</span>{{ userInfo.wechatNickname }}
                    </el-col>
                    <el-col :span="12" class="userInfoItem">
                        <span>账号(监控中心)：</span>{{ userInfo.account }}
                    </el-col>
                    <el-col :span="12" class="userInfoItem">
                        <span>密码(监控中心)：</span><span :title="userInfo.password">xxxxxx</span>
                    </el-col>
                </el-row>
                <el-form
                    v-if="updateUserInfoFlag==true"
                    ref="updateRef"
                    :model="baseInfoForm"
                    :rules="baseInfoFormRules"
                    label-width="auto"
                    label-position="left"
                    >
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="手机号:" prop="phone">
                                <el-input style="width: 70%;" v-model="baseInfoForm.phone" :disabled="true" placeholder="请输入手机号"  clearable/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="用户名称:" prop="name">
                                <el-input style="width: 70%;" v-model="baseInfoForm.name" placeholder="请输入用户名称"  clearable/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="微信号：" prop="wechatID">
                                <el-input style="width: 70%;" v-model="baseInfoForm.wechatID" placeholder="请输入微信号"  clearable/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="微信昵称:" prop="name">
                                <el-input style="width: 70%;" v-model="baseInfoForm.wechatNickname" placeholder="请输入微信昵称"  clearable/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="账号(监控中心)：" prop="account">
                                <el-input style="width: 70%;" v-model="baseInfoForm.account" placeholder="请输入账号(监控中心)"  clearable/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="密码(监控中心):" prop="password">
                                <el-input style="width: 70%;"  type="password" show-password v-model="baseInfoForm.password" placeholder="请输入密码(监控中心)"  clearable/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <p>个人权益</p>
                <el-row>
                    <el-col :span="12" class="userInfoItem" >
                        <span>一对一类型：</span>{{ userInfo.vipServer }}
                    </el-col>
                    <el-col :span="12" class="userInfoItem">
                        <span>待充值：</span>
                        <template v-if="userInfo.unRecharge<0">0</template>
                        <template v-else>{{ userInfo.unRecharge }}</template>
                    </el-col>
                    <el-col :span="12" class="userInfoItem">
                        <span>合伙人权益分红(累计)：</span> 现金 : xxxx   重心币: xxx
                    </el-col>
                   
                </el-row>

                <el-row v-if="purchaseCoursesList && purchaseCoursesList.length > 0">
                    <template v-for="(item,index) in purchaseCoursesList" :key="index">
                        <el-col :span="12" class="userInfoItem" >
                            <span>开通日期：</span>{{ item.purchaseDate }}
                        </el-col>
                        <el-col :span="12" class="userInfoItem" >
                            <span>课程名称：</span>{{ item.type }}
                        </el-col>
                        <!-- <el-col :span="6" class="userInfoItem" >
                            <span>金额：</span>{{ item.consumeAmout }}
                        </el-col> -->
                    </template>
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getUserInfo } from "@/utils/localStorage.js";
import { getByPhone, updateStudent } from '@/api/oss/student.js'
  import { selectDictionaryByTypeCode } from '@/api/system/dictionary.js'
export default {
    data() {
        return {
            dialogVisible: false,
            // 学员信息
            userInfo:undefined,
            // 购课信息
            purchaseCoursesList:[],
            // 一对一服务字典列表
            vipServerList:[],
            // 数据加载中
            loading:false,
            // 是否修改用户信息
            updateUserInfoFlag:false,
            // 基本信息表单数据
            baseInfoForm: {
                id:undefined,
                phone:undefined,
                name:undefined,
                wechatID:undefined,
                wechatNickname:undefined,
                account:undefined,
                password:undefined,
            },
            baseInfoFormRules: {
                phone: [
                    { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
                    { min: 11, max: 11, message: '手机号为11位字符', trigger: ['blur', 'change'] },
                ],
                wechatID: [
                    { required: true, message: '请输入微信号', trigger: ['blur', 'change'] },
                ],
                loginPassword: [
                    { required: true, message: '请输入登录', trigger: ['blur', 'change'] },
                    { min: 6,  message: '登录密码最少为6位', trigger: ['blur', 'change'] },
                ],
            },
        }
    },
    mounted(){
    },
    methods: {
        saveUserInfo(){
            this.updateUserInfoFlag = false
            updateStudent(this.baseInfoForm).then(res=>{
                if (res.code == 1) {
                    this.$message.success("修改成功")
                    getByPhone({phone:getUserInfo().userAccount}).then(res=>{
                        if (res.code == 1) {
                            this.userInfo = res.data;
                            this.purchaseCoursesList = res.data.purchaseCoursesList;
                        }
                    })
                }
            })
        },
        updateUserInfo(){
            this.updateUserInfoFlag = true
            this.baseInfoForm.id = this.userInfo.id
            this.baseInfoForm.phone = this.userInfo.phone
            this.baseInfoForm.name = this.userInfo.name
            this.baseInfoForm.wechatID = this.userInfo.wechatID
            this.baseInfoForm.wechatNickname = this.userInfo.wechatNickname
            this.baseInfoForm.account = this.userInfo.account
            this.baseInfoForm.password = this.userInfo.password

        },
        async openModal() {
            this.dialogVisible = true;
            this.updateUserInfoFlag = false
            this.loading = true
            this.userInfo = undefined
            this.purchaseCoursesList = []
            await selectDictionaryByTypeCode({"dicTypeCode":"VipServer"}).then(res=>{
                if (res.code == 1) {
                    this.vipServerList = res.data
                }
            })
            await getByPhone({phone:getUserInfo().userAccount}).then(res=>{
                if (res.code == 1) {
                    this.userInfo = res.data;
                    this.purchaseCoursesList = res.data.purchaseCoursesList;
                }
            }).finally(()=>{
                this.loading = false
            })
        },
        getVipServerName(vipServerArray){
          if (vipServerArray && vipServerArray.length > 0) {
            return this.vipServerList.filter(item=>vipServerArray.includes(item.dicValue)).map(item=>item.dicName).join(', ')
          }
        },
    },
}
</script>
<style scoped>
.userInfoItem {
    text-align: left;
    padding: 5px 0px;
    font-size: 14px;
}
:deep(.el-form-item) {
    padding: 0;
    margin-bottom: 6px;
}
:deep(.el-form-item--label-left .el-form-item__label) {
    font-size: 14px !important;
    color: var(--el-text-color-regular);
    font-weight: 500;
}
</style>